<script setup lang="ts">
const route = useRoute()
const appConfig = useAppConfig()
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const links = [{
    id: 'index',
    label: '首页',
    icon: 'i-heroicons-home',
    labelClass:'text-xl text-black',

  to: '/admin/home',
    tooltip: {
        text: 'Home',
    }
},
{
    id: 'user',
    label: '用户管理',
    labelClass:'text-xl text-black',
    icon: 'i-heroicons-user',
    to: '/admin/user',
    tooltip: {
        text: 'user',
    }
},
{
    id: 'user_tag',
    label: '用户标签',
    icon: 'i-heroicons-tag',
    labelClass:'text-xl text-black',

  to: '/admin/user_tag',
    tooltip: {
        text: '用户标签',
    }
},
  {
    id: 'news',
    label: '公告管理',
    icon: 'i-heroicons-newspaper',
    labelClass:'text-xl text-black',
    activeClass:'bg-blue-500',
    to: '/admin/news',
    tooltip: {
      text: '公告管理',
    }
  },
  {
    id: 'sport',
    label: '资讯管理',
    icon: 'i-heroicons-newspaper',
    labelClass:'text-xl text-black',
    activeClass:'bg-blue-500',
    exactActiveClass:'text-black',
    to: '/admin/sport',
    tooltip: {
      text: '资讯管理',
    }
  }
]
const items = [[{
    label: 'logout',
    icon: 'i-heroicons-paper-airplane',
    click:()=>{
    localStorage.removeItem('token')
    localStorage.removeItem('user_id')
    localStorage.removeItem('username')
    router.push('/login')
  }

}
]
]


</script>

<template>
    <UDashboardLayout>
        <UDashboardPanel :width="250" style="background-color: #545c64" :resizable="{ min: 200, max: 300 }" collapsible>
            <UDashboardSidebar>
                <UDashboardSidebarLinks style="color: white" class=" !text-white !h-20 !text-2xl" :links="links" />
            </UDashboardSidebar>
        </UDashboardPanel>
        <UDashboardPanel grow>
            <UDashboardNavbar :ui="{ left: 'flex-1' }">
                <template #left>
                    Dashboard
                </template>
                <template #right>
                    <UDropdown :items="items" class="text-blue-300">
                        <UButton icon="i-heroicons-plus" size="md" class="ml-1.5 rounded-full" />
                    </UDropdown>
                </template>

            </UDashboardNavbar>
            <UDashboardPanelContent class="bg-slate-50">
                <slot />
            </UDashboardPanelContent>
        </UDashboardPanel>
    </UDashboardLayout>
</template>